<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-25 22:19:50
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-09-01 09:12:55
 * @FilePath: /nhw/src/views/Work/EquipmentRepair/index.vue
-->
<template>
  <div class="EquipmentRepair">
    <NavBar fixed placeholder title="店铺信息" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.back()"
        />
      </template>
    </NavBar>
    <div class="main">
      <Field
        v-model="info.ocsHouseNam"
        label="店铺名称"
        placeholder=""
        readonly
        input-align="right"
      ></Field>
      <Field
        v-model="info.ocsProductCate"
        label="经营类别"
        placeholder=""
        readonly
        input-align="right"
      ></Field>
      <Field
        v-model="info.ocsNam"
        label="经营者姓名"
        placeholder=""
        readonly
        input-align="right"
      ></Field>
      <Field
        v-model="info.ocsTel"
        label="经营者号码"
        placeholder=""
        readonly
        input-align="right"
      ></Field>
      <Field
        v-model="info.ocsSpecificLocation"
        label="具体位置"
        placeholder=""
        readonly
        input-align="right"
      ></Field>
      <Field
        :value="lvList[info.ocsSafeRank]"
        label="风险等级"
        placeholder=""
        input-align="right"
        readonly
      ></Field>
      <Field
        v-model="submitInfo.ocsCheckNam"
        label="检察人员"
        placeholder=""
        input-align="right"
      ></Field>

      <Field
        label="请上传店铺断电情况照片"
        required
        label-width="15em"
        readonly
        :border="false"
      />
      <Uploader v-model="fileList1" multiple :max-count="1" capture="camera" />

      <Field
        label="请上传店铺闭店照片"
        required
        label-width="15em"
        readonly
        :border="false"
      />
      <Uploader v-model="fileList2" multiple :max-count="1" capture="camera" />

      <Field
        label="请上传检查表照片"
        required
        label-width="15em"
        readonly
        :border="false"
      />
      <Uploader v-model="fileList3" multiple :max-count="1" capture="camera" />
    </div>
    <div class="btn-placeholder"></div>
    <Button class="btn" @click="onSubmit">闭店</Button>
  </div>
</template>

<script>
// import BaiduMap from "BaiduMap";
import { todayCloseShopInfo1, todayCloseShopSubmit } from "../../../api/work";
import Layout from "components/Layout";
import uploadImages from "@/utils/uploadImages.js";
import {
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  Picker,
  Popup,
  DatetimePicker,
  Toast,
} from "vant";
export default {
  name: "EquipmentRepair",

  components: {
    Uploader,
    NavBar,
    Icon,
    Field,
    Cell,
    Button,
    Picker,
    Popup,
    DatetimePicker,
    Toast,
  },

  directives: {},

  data() {
    return {
      fileList1: [],
      fileList2: [],
      fileList3: [],
      info: {},

      lvList: ["", "一级", "二级", "三级"],
      submitInfo: {
        ocsNo: this.$route.query.ocsNo,
        ocsSafeRank: "",
        ocsCheckNam: "",
        ocsElecPic: "",
        ocsClosePic: "",
        ocsCheckPic: "",
      },
    };
  },
  computed: {},
  mounted() {
    this.getLv();
  },

  methods: {
    async getLv() {
      const { value } = await todayCloseShopInfo1({
        ...this.$route.query,
      });
      console.log(value);
      this.info = value;
      this.submitInfo.ocsSafeRank = value.ocsSafeRank;
    },
    async onSubmit() {
      if (this.submitInfo.ocsCheckNam.length <= 0)
        return Toast.fail("请输入检查人员姓名");
      if (this.fileList1.length <= 0)
        return Toast.fail("请上传店铺断电情况照片");
      if (this.fileList2.length <= 0) return Toast.fail("请上传店铺闭店照片");
      if (this.fileList3.length <= 0) return Toast.fail("请上传检查人员照片");

      this.$toast.loading({
        message: "正在上传图片",
        duration: 0,
      });
      let pic1 = await uploadImages(this.fileList1);
      let pic2 = await uploadImages(this.fileList2);
      let pic3 = await uploadImages(this.fileList3);
      this.submitInfo.ocsElecPic = pic1.join(",");
      this.submitInfo.ocsClosePic = pic2.join(",");
      this.submitInfo.ocsCheckPic = pic3.join(",");

      await todayCloseShopSubmit(this.submitInfo);
      this.$toast.success("提交成功！");
      this.$router.push({
        path: "ThreeCloseOneClosed",
        query: {
          activeName: "b",
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.EquipmentRepair {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  padding: 30px 0;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .main {
    padding-bottom: 20px;
    background-color: #fff;
    .search-icon {
      color: @primary;
    }
    textarea {
      width: 692px;
      height: 157px;
      margin: 10px 0;
      margin-left: 50%;
      padding: 15px;
      transform: translate(-50%);
      border: 1px solid #dddddd;
      font-size: 26px;
      border-radius: 6px;
    }
    /deep/.van-cell__title span {
      color: black;
    }
    .location-box {
      width: 100%;
      display: flex;
      align-items: center;
      div {
        font-size: 28px;
        color: #999999;
      }
    }
    .van-uploader {
      margin: 20px;
    }
    /deep/.van-uploader__upload {
      border: 2px dashed #e16712;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      background: #fff;
      .van-icon {
        color: rgb(225, 103, 18);
        &::before {
          content: "\F0A2";
        }
      }
    }
  }
  .btn-placeholder {
    height: 98px;
  }
  .btn {
    height: 98px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    width: 90%;
    transform: translate(-50%);
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
  /deep/.van-icon {
    display: flex;
    align-items: center;
  }
}
</style>